<template>
    <div>
        <Button icon="md-add-circle" @click="addQuestion" class="mybtn" size="small" type="info">添加</Button>
        <br/>
        <Card class="mycard" :padding=0>
            <p slot="title">
                <Icon type="md-barcode"/>
                评价项
            </p>
                <Table v-for="(item,index) in data" :key="index" context-menu
                       show-context-menu
                       size="small"
                       :loading="loading"
                       :columns="item.length>0 && item[0].type=='选项' ?columns:columns2"
                       @on-contextmenu="handleContextMenu"
                       :data="item">
                    <template slot="contextMenu">
                        <div>
                            <DropdownItem @click.native="editRow">
                                <Icon type="md-build"/>
                                编辑
                            </DropdownItem>
                            <DropdownItem @click.native="deleteRow" style="color: #ed4014">
                                <Icon type="md-trash"/>
                                删除
                            </DropdownItem>
                        </div>
                    </template>
                </Table>
        </Card>
    </div>
</template>

<script>
    export default {
        name: "questions",
        props: {
            modal: {
                evaluate: {}
            }
        },
        data() {
            return {
                loading: false,
                columns: [
                    {
                        title: '评价项',
                        width: 200,
                        key: "evaluationitem"
                    },
                    {
                        title: '评价内容',
                        key: "commentcontent"
                    },
                    {
                        title: '绑定表号',
                        width: 200,
                       render:(h,params)=>{
                            return <div>
                                { params.row.scoring? <Tag color="primary">分值</Tag>:<Tag color="success">选项</Tag> }
                                <strong style="margin-right:8px">{params.row.bindingScoreItem}</strong>
                            </div>
                       }
                    },
                ],
                columns2: [
                    {
                        title: '评价标题',
                        key: "commentcontent"
                    },
                ],
                data: [],
                newData: {
                    type: "选项",
                    bindingScoreItem: null,
                    evaluationitem: null,
                    commentcontent: null,
                    eid: null
                },
                row: {}
            }
        },
        methods: {
            handleContextMenu(row) {
                this.row = row
            },
            deleteRow() {
                let ind = this.data.map((m, index) => {
                    return m.map(t => {
                        if (t.type === this.row.type) {
                            return index
                        }
                    }).filter(f => f != undefined)
                }).filter(s => s.length > 0)[0][0]
                debugger
                let index = this.data[ind].findIndex(f => f.eqId === this.row.eqId)
                this.http.delete(`/question/deleteQuestionById/${this.row.eqId}/${this.row.type}`).then(res => {
                    if (res.data) {
                        this.$Message.success({
                            background: true,
                            content: "删除成功"
                        })
                        this.data[ind].splice(index, 1)
                    }
                })
            },
            editRow() {
                let array = JSON.parse(sessionStorage.getItem("scoreitem"))
                let _this = this
                this.$Modal.confirm({
                    title: "修改",
                    width: "550",
                    render: () => {
                        return <div>
                            <i-form label-width={70}>
                                <form-item label="类型">
                                    <radio-group v-model={this.row.type}>
                                        <Radio disabled label="文本" border></Radio>
                                        <Radio disabled label="选项" border></Radio>
                                    </radio-group>
                                </form-item>
                                <transition name="bounce">
                                    <form-item v-show={this.row.type == "选项"} label="评价项">
                                        <i-input v-model={this.row.evaluationitem}/>
                                    </form-item>
                                </transition>
                                <transition name="bounce">
                                    <form-item v-show={this.modal.evaluate.etype == 2 && this.row.type == "选项"}
                                               label="绑定">
                                        <i-select v-model={this.row.bindingScoreItem}>
                                            {
                                                array.map(m => {
                                                    return <i-option value={m}>{m}</i-option>
                                                })
                                            }
                                        </i-select>
                                    </form-item>
                                </transition>
                                <transition name="bounce">
                                    <form-item v-show={this.row.type == "选项"} label="详细打分">
                                        <i-switch v-model={this.row.scoring} size="large">
                                            <span slot="open">开启</span>
                                            <span slot="close">关闭</span>
                                        </i-switch>
                                        (开启之后将会取表格内最高分作为打分上限)
                                    </form-item>
                                </transition>
                                <form-item label={this.row.type == "选项" ? "评价内容" : "评价标题"}>
                                    <i-input type="textarea" v-model={this.row.commentcontent}/>
                                </form-item>
                            </i-form>
                        </div>
                    },
                    onOk() {
                        _this.row.eid = _this.modal.evaluate.eid
                        _this.http.put("/question/saveUpdateQuestion", _this.qs.parse(_this.row)).then(res => {
                            if (res.data) {
                                _this.$Message.success({
                                    background: true,
                                    content: "修改成功"
                                })
                                let ind = _this.row.type === "选项" ? 0 : 1
                                let index = _this.data[ind].findIndex(f => f.eqId === _this.row.eqId)
                                Object.assign(_this.data[ind][index], _this.row)
                            }
                        })

                    }
                })
            },
            /**
             * 获取全部的信息
             */
            getAllQuestionByeid() {
                this.loading = true
                this.http.get(`/question/getAllQuestionByeid/${this.modal.evaluate.eid}`).then(res => {
                    if (res.data) {
                        this.data = []
                        let array = res.data.filter(f => f.type === "选项")
                            .map(m => {
                                m.bindingScoreItem = m.scoreitemDOList.map(t => {
                                    return t.scode
                                })[0]
                                return m;
                            })
                        let array2 = res.data.filter(f => f.type === "文本")
                        if (array.length > 0) {
                            this.data.push(array)
                        }
                        if (array2.length > 0) {
                            this.data.push(array2)
                        }

                    }
                }).finally(f => {
                    this.loading = false
                })
            },
            /**
             * 添加数据
             */
            addQuestion() {
                this.newData = {
                        type: "选项",
                        bindingScoreItem: null,
                        evaluationitem: null,
                        commentcontent: null,
                        eid: null
                }
                let _this = this
                let array = JSON.parse(sessionStorage.getItem("scoreitem"))
                this.$Modal.confirm({
                    width: "550",
                    title: "添加",
                    render: () => {
                        return <div>
                            <i-form label-width={70}>
                                <form-item label="类型">
                                    <radio-group v-model={this.newData.type}>
                                        <Radio label="文本" border></Radio>
                                        <Radio label="选项" border></Radio>
                                    </radio-group>
                                </form-item>
                                <transition name="bounce">
                                    <form-item v-show={this.newData.type == "选项"} label="评价项">
                                        <i-input v-model={this.newData.evaluationitem}/>
                                    </form-item>
                                </transition>
                                <transition name="bounce">
                                    <form-item v-show={this.modal.evaluate.etype == 2 && this.newData.type == "选项"}
                                               label="绑定">
                                        <i-select v-model={this.newData.bindingScoreItem}>
                                            {
                                                array.map(m => {
                                                    return <i-option value={m}>{m}</i-option>
                                                })
                                            }
                                        </i-select>
                                    </form-item>
                                </transition>
                                <transition name="bounce">
                                    <form-item v-show={this.newData.type == "选项"} label="详细打分">
                                        <i-switch v-model={this.newData.scoring} size="large">
                                            <span slot="open">开启</span>
                                            <span slot="close">关闭</span>
                                        </i-switch>
                                        (开启之后将会取表格内最高分作为打分上限)
                                    </form-item>
                                </transition>
                                <form-item label={this.newData.type == "选项" ? "评价内容" : "评价标题"}>
                                    <i-input type="textarea" v-model={this.newData.commentcontent}/>
                                </form-item>
                            </i-form>
                        </div>
                    },
                    onOk() {
                        if (_this.modal.evaluate.etype == 1 && _this.newData.type == "选项") {
                            if (array.length > 0) {
                                let array = JSON.parse(sessionStorage.getItem("scoreitem"))
                                _this.newData.bindingScoreItem = array[0]
                            } else {
                                return _this.$Message.error({
                                    background: true,
                                    content: "请先在左侧添加选项"
                                })
                            }
                        }
                        _this.newData.eid = _this.modal.evaluate.eid
                        _this.http.post("/question/saveAddQuestion", _this.qs.parse(_this.newData)).then(res => {
                            if (res.data) {
                                _this.$Message.success({
                                    background: true,
                                    content: "添加成功"
                                })
                                _this.getAllQuestionByeid()
                            }
                        })
                    }
                })
            },
        }
    }

</script>

<style lang="less">
    .mybtn {
        margin-top: 10px;
        margin-right: 5px;
    }

    .mycard {
        margin-top: 10px;
        margin-right: 10px;
        border-bottom: 0px;
    }

</style>
